html,body {
    height:100%;
    width:100%;
}

img {
    display:block;
}

a {
    text-decoration: none;
}
a:link {
    text-decoration: none;
}

ul {
    list-style: none;  
    padding:0px;
    margin:0px;
}

.main {
    transition: all 1s;
    &.run {
        padding-left:0px;
    }
    padding-left:180px;
    height:100%;
    position: relative;
    background-color: #fff;
    .left{
        transition: all 1s;
        &.run {
            left:-180px;
        }
        width:180px;
        height:100%;
        background-color:#222d32;
        position: absolute;
        top:0px;
        left:0px;
        h3 {
            padding:0;
            height:50px;
            margin:0;
            text-align:center;
            line-height:50px;
            color:#fff;
            background-color:#367fa9
        }
        .icon{
            width:100%;
            height:180px;
            display:flex;
            flex-direction:column;
            justify-content: center;
            align-items:center;
            img {
                width:80px;
                height:80px;
                border-radius:50%;
            }
            p {
                // width: 40px;
                height: 40px;
                font-size:16px;
                line-height:40px;
                color:#fff;
            }
        }
        .category {
            .active {
                background-color: #1d1f21;
                border-left:3px solid #006699
            }
            // margin-top:30px;
            li {
                // width:180px;
                a{
                    border: 3px solid transparent;
                    padding-left:40px;
                    height:40px;
                    width:100%;
                    display:block;
                    color:#fff;
                    line-height:40px;
                    span {
                        margin-right:5px;
                    }
                }
                .classify {
                    a {
                        padding-left:60px;
                    }
                }
            }

        }
    }
    .right {

        width:100%;
        height:100%;
        .top {
            height:50px;
            background-color:#3c8dbc;
            font-size:20px;
            padding:0 20px;
            margin-bottom:20px;
            span {
                display: block;
                width:50px;
                line-height:50px;
                cursor: pointer;
                &:nth-child(2){
                    text-align:right;
                }
            }
        }
       .echarts{
           height:400px;
           .bar {
               height:100%
           }
           .pie {
               height:100%;
           }
       }
    }

}

.modal-content {
    margin:0 auto;
    .font {
        color:red;
    }
}